/*
 * Copyright 2015-2016 Imply Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../../../imports';

.item-card {
  width: 280px;
  height: 94px;
  padding: 5px 5px 0 0;

  cursor: pointer;

  .inner-container {
    background-color: $white;
    box-shadow: 0 1px 1px 0 rgba($black, 0.1);
    width: 100%;
    height: 100%;
    padding: 16px 16px;
    border-radius: $corner;

    white-space: nowrap;

    > * {
      display: inline-block;
    }

    .svg-icon.view-icon {
      height: 19px;
      margin-right: 9px;
      opacity: 0.6;

      path {
        fill: $brand;
      }
    }

    .text {
      padding-top: 2px;
      white-space: normal;
      width: calc(100% - 30px);

      .title {
        font-size: 13px;
        color: $text-standard;
        margin-bottom: 5px;
        margin-right: 12px;
        line-height: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .description {
        font-size: 12px;
        line-height: 16px;
        color: #aaa;
        height: 33px;
        overflow-y: hidden;
      }
    }

    .count {
      margin-left: 3px;

      &::before {
        content: '(';
      }

      &::after {
        content: ')';
      }
    }

    .more-button {
      position: absolute;
      top: 14px;
      right: 10px;
      width: 20px;
      height: 20px;
      border-radius: 10px;

      &:hover {
        background: #f2f2f2;

        .svg-icon path {
          fill: #aaa;
        }
      }

      .svg-icon {
        margin: 5px;
        width: 10px;
        height: 10px;

        path {
          fill: #d0d0d0;
        }
      }
    }
  }

  &.new-one {
    opacity: 0.4;

    &:hover {
      opacity: 0.6;
    }

    .inner-container {
      text-align: center;
      box-shadow: initial;
      background: $white;

      .svg-icon {
        margin-top: 10px;
        height: 36px;

        path {
          fill: #777;
        }
      }
    }
  }

  &:hover {
    z-index: 1;

    .inner-container {
      .svg-icon {
        opacity: 1;
      }
    }
  }
}
